<template>
  <div class="body">
    <div class="main" v-show="!show">
      <Header :navList="navList"/>
      <div class="content">
        <div class="list-content">
          <div style="height: 100%;display: flex">
            <div style="width: 270px;">
              <div
                  style="height: 32px;line-height: 32px;font-size: 24px;color: #000000;display: flex;width: 270px;border-bottom: 2px solid #60A3D7;padding-bottom: 8px">
                <div style="width: 8px;height: 32px;background: #60A3D7;margin-right: 10px"></div>
                <div>{{ title }}</div>
              </div>
              <div style="padding-top: 8px">
                <!--                <div class="list" :class="{'is':active===index}" v-for="(item, index) in options"-->
                <!--                     @click="handleCheckList(item.id,item.moduleName, index)" :key="index">{{ item.moduleName }}-->
                <!--                </div>-->
                <div v-if="options.length > 0">
                  <el-collapse v-model="activeNames" @change="handleChange" accordion>
                    <el-collapse-item v-for="(item, index) in options" :title="item.moduleName" :name="item.id"
                                      :key="index">
                      <div class="list" v-for="(res,resIndex) in item.date" :key="res"
                           @click="handleCheckList(item.id,item.moduleName, resIndex, res)">{{ res }}
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
                <div v-else>
                  <div class="list" v-for="(res,resIndex) in dateList" :key="res"
                       @click="handleCheckList('','', resIndex, res)">{{ res }}
                  </div>
                </div>

              </div>
            </div>
            <div style="flex: 1;">
              <div style="flex: 1;padding-left: 30px">
                <div
                    style="font-size: 14px;color: #787c83;display: flex;height: 41px;line-height: 41px;border-bottom: 1px solid #cdcdcd">
                  <div style="margin-right: 8px"><i class="el-icon-s-home" style="margin-right: 4px"></i>首页</div>
                  <div style="margin-right: 8px">></div>
                  <div style="margin-right: 8px">{{ title }}</div>
                  <div style="margin-right: 8px" v-show="childTitle">></div>
                  <div style="margin-right: 8px" v-show="childTitle">{{ childTitle }}</div>
                </div>
                <!--                <div style="margin: 35px 0;font-size: 36px;text-align: center"></div>-->
                <div style="padding-top: 8px" v-show="!showImg">
                  <div v-if="detailList.length > 0">
                    <div class="list-news" v-for="item in detailList" :key="item.id" @click="handleNews(item)">
                      <div style="display: flex;align-items: center;">
                        <div class="list-mark"></div>
                        <div :class="item.topFlag ? 'list-title-news-top list-title' : 'list-title'">{{ item.name }}</div>
                      </div>
                      <div style="width: 160px">
                        {{ item.createDate }}
                      </div>
                    </div>
                  </div>
                  <div v-else style="font-size: 14px;text-align: center;margin-top: 40px">暂无数据</div>
                </div>
                <div v-show="showImg" style="padding: 24px 0">
                  <el-row :gutter="12">
                    <el-col :span="8" v-for="(item,index) in imgList" style="margin-bottom: 12px" :key="index">
                      <div style="height: 185px;width: 100%;margin-bottom: 8px;cursor: pointer"
                           @click="handleGallery(item)">
                        <img :src="item.filePath" style="width: 100%;height: 100%;object-fit: cover;" alt=""/>
                      </div>
                      <div style="text-align: center;font-size: 12px;color: #333;font-weight: 600;cursor: pointer "
                           @click="handleGallery(item)">
                        {{ item.name }}
                      </div>
                    </el-col>
                  </el-row>
                </div>
                <div style="margin-top: 12px;text-align: center">
                  <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :page-sizes="[15, 30, 45]"
                      :page-size="100"
                      v-show="total > 0"
                      layout="total, prev, pager, next, sizes"
                      :total="total">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer/>
    </div>
    <div class="a" v-show="show"></div>
  </div>

</template>

<script>
import { getList, getMoreDetailApi } from "@/api/home";
// import Nav from "@/templates/Nav";
import Header from "@/templates/Layout/MoreHeader.vue";
import Footer from "@/templates/Layout/Footer.vue";
import { getBubbleSort } from "@/util/util";
import dayjs from "dayjs";
// import { quillEditor } from "vue-quill-editor";

export default {
  components: {
    Footer,
    Header,
    // Nav,
  },
  data() {
    return {
      active: 0,
      total: 0,
      title: '',
      activeNames: ['1'],
      childTitle: '',
      paused: false,
      notice: [],
      news: [],
      fileList: [],
      options: [],
      show: true,
      moduleName: '',
      createDate: '',
      content: '',
      form: {
        value: ''
      },
      detailList: [],
      page: {
        pageNum: 1,
        pageSize: 15
      },
      list: [],
      imgList: [],
      showImg: false,
      navList: [],
      dateList: [],
      date: dayjs().year()
    }
  },

  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const moduleId = this.$route.query.id
      const code = this.$route.query.code
      const res = await getList()
      this.navList = this.getNavBarList(res.navList, res.orgList)
      if (moduleId && code) {
        const res = await getMoreDetailApi({moduleId, code, date: this.date, ...this.page})
        this.handleData(res)
        if (code === 'IMG') {
          if (res.records.length > 0) {
            this.imgList = res.records[0].articleList
            if (process.env.VUE_APP_ENV === 'local') {
              this.imgList.map(item => (
                  item.filePath = item.filePath.replace("http://127.0.0.1:8080", "http://x15wywe2l9f7.xiaomiqiu.com")
              ))
            }

            this.title = res.records[0].moduleName
            this.showImg = true
            this.total = Number(res.total)
          }
        } else if (code === 'NOTICE') {
          if (res.records.length > 0) {
            this.detailList = res.records[0].hasChildren ? res.records[0].children : res.records[0].articleList
            this.title = '通知公告'
            this.total = Number(res.total)
          }
        } else {
          // this.options = res[0].children
          if (res[0].children.length > 0) {
            this.list = res[0].children
            this.list.forEach((item, index) => {
              if (item.id === moduleId) {
                if (item.page.records[0] !== null) {
                  this.detailList = item.page.records
                } else {
                  this.detailList = []
                }
                this.total = Number(item.page.total)
                this.active = index
                this.childTitle = item.moduleName
              }
            })
          } else {
            this.detailList = res[0].page.records
            this.total = Number(res[0].page.total)
          }
          this.title = res[0].moduleName
          this.showImg = false
        }
      }
      this.show = false
    },
    getNavBarList(nav, org) {
      org[0].moduleName = '工作动态'
      org[0].order = 20
      nav[0].children.push(org[0])
      // const a = getBubbleSort(nav[0].children)
      return nav[0].children.sort(getBubbleSort('order', 1))
    },
    handleChange() {
      // console.log(value)
    },
    handleGallery(row) {
      localStorage.removeItem('galleryList')
      if (row.id) {
        const {href} = this.$router.resolve({
          path: `/gallery`,
          query: {
            id: row.id,
            type: row.bizType,
          }
        });
        const list = []
        this.imgList.forEach(item => {
          list.push({id: item.id, name: item.name})
        })
        localStorage.setItem('galleryList', JSON.stringify(list))
        window.open(href, '_blank');
      }
    },
    handleHome(type) {
      if (type === 1) {
        const {href} = this.$router.resolve({
          path: `/home`
        });
        window.open(href, '_blank');
      } else if (type === 2) {
        const id = localStorage.getItem('y')
        if (id) {
          const {href} = this.$router.resolve({
            path: `/news`,
            query: {
              id,
            }
          });
          window.open(href, '_blank');
        }
      } else {
        const id = localStorage.getItem('d')
        if (id) {
          const {href} = this.$router.resolve({
            path: `/news`,
            query: {
              id,
            }
          });
          window.open(href, '_blank');
        }
      }
    },
    async handleCheckList(moduleId, name = '', index, date) {
      const id = moduleId || this.$route.query.id
      this.active = `${ moduleId }_${ index }`
      this.childTitle = name
      this.date = date
      const code = this.$route.query.code
      const res = await getMoreDetailApi({moduleId: id, code: this.$route.query.code, ...this.page, date})
      if (code === 'IMG') {
        if (res.records.length > 0) {
          this.imgList = res.records[0].articleList
          if (process.env.VUE_APP_ENV === 'local') {
            this.imgList.map(item => (
                item.filePath = item.filePath.replace("http://127.0.0.1:8080", "http://x15wywe2l9f7.xiaomiqiu.com")
            ))
          }
          this.title = res.records[0].moduleName
          this.showImg = true
          this.total = Number(res.total)
        }
      } else if (code === 'NOTICE') {
        // console.log('res',res)
        if (res.records.length > 0) {
          this.detailList = res.records[0].hasChildren ? res.records[0].children : res.records[0].articleList
          this.title = '通知公告'
          this.total = Number(res.total)
        } else {
          this.detailList = []
          this.title = '通知公告'
          this.total = Number(res.total)
        }
      } else {
        if (res[0].page) {
          this.detailList = res[0].page.records
          this.total = Number(res[0].page.total)
        } else {
          res[0].children.forEach(item => {
            if (item.id === id) {
              // this.detailList = item.page.records
              if (item.page.records[0] !== null) {
                this.detailList = item.page.records
                this.total = Number(item.page.total)
              } else {
                this.detailList = []
                this.total = 0
              }

            }
          })
        }
      }


    },
    handleNews(row) {
      if (row.outHref) {
        window.open(row.outHref)
      } else {
        if (row.id) {
          const {href} = this.$router.resolve({
            path: `/news`,
            query: {
              id: row.id,
              type: row.bizType
            }
          });
          window.open(href, '_blank');
        }
      }
    },
    handleSizeChange(value) {
      this.page.pageSize = value
      this.getList()
    },
    handleCurrentChange(value) {
      this.page.pageNum = value
      this.getList()
    },
    handleData(data) {
      // console.log('data', data)
      // const date1 = dayjs()
      // const date2 = dayjs('2018-06-05')
      // date1.diff(date2) // 20214000000 default milliseconds
      // dayjs().diff('2023', 'year', true)
      const code = this.$route.query.code
      const diffDate = dayjs().diff('2023', 'year', true)
      // console.log('a', Math.ceil(diffDate))
      let b = 2023
      const list = []
      for (let i = 0; i < diffDate; i++) {
        // console.log('i',i)
        list.push(b++)
      }
      // console.log('data',data)
      // const dateList = []
      list.reverse()
      if (code !== 'IMG' && code !== 'NOTICE') {
        const params = data[0].children
        if (params.length > 0) {
          params.forEach((item) => {
            item.date = list
          })
        } else {
          this.dateList = list
        }
        this.options = params
      }
      this.dateList = list
    }
  }
}
</script>

<style lang="less" scoped>
.body {
  background: #fff;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.main {
  background: #fff;
  height: 100%;
  width: 100%;
  display: table;
}

.content {
  width: 100%;
  height: 100%;
  margin: 24px 0;
  display: flex;
  justify-content: center;
}

.list-content {
  min-height: calc(100vh - 210px - 60px - 60px - 48px);
  width: 1200px;
  background: #fff;
}

.a {
  background: #ECF1F7;
}


.list {
  height: 48px;
  width: 100%;
  font-size: 16px;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  background: #EBEEF5;
}

.list:not(:last-child) {
  border-bottom: 1px solid #F2F6FC;
}

.list:hover {
  background: #60A3D7;
  color: #fff;
}

.list-news {
  font-size: 15px;
  color: #444;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-mark {
  width: 5px;
  height: 5px;
  background: #60A3D7;
  margin-right: 10px;
}

.list-title {
  cursor: pointer;
}

.is {
  background: #60A3D7;
  color: #fff;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #60A3D7
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #60A3D7;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}

/deep/ .el-collapse-item__content {
  padding-bottom: 0 !important;
}
.list-title-news-top {
  font-weight: 600;
}

</style>
